<style>
</style>

<template>
  <div class="__module-view-con">
    <Card>
      <head-tool @on-add-module="handleAddModule"/>

      <module-table :data="tableData"
                    :loading="tableLoading"
                    @on-update-module="handleUpdateModule"
                    @on-remove-module="handleRemoveModule"/>
    </Card>
  </div>
</template>

<script>
  import ModuleTable from './component/table'
  import HeadTool from './component/head-tool'
  import {mapActions, mapState} from 'vuex'
  import {_ChildLoading} from "_libs/util";

  export default {
    name: 'ModuleView',
    data() {
      return {
        moduleData: [],
        tableLoading: false
      }
    },
    computed: {
      ...mapState('system', {
        tableData: state => state.module.moduleList
      })
    },
    methods: {
      ...mapActions('system/module', [
        'listModule',
        'addModule',
        'updateModule',
        'removeModule'
      ]),

      // 添加模块
      handleAddModule(module, loadingCb) {

        let res = this.addModule(module);
        _ChildLoading(res, () => {
          this.$Message.success('模块添加成功')
        }, loadingCb)

      },

      // 更新模块
      handleUpdateModule(module, loadingCb) {

        let res = this.updateModule(module);
        _ChildLoading(res, () => {
          this.$Message.success('模块更新成功')
        }, loadingCb)

      },

      // 删除模块
      handleRemoveModule(module, loadingCb) {

        let res = this.removeModule(module);
        _ChildLoading(res, () => {
          this.$Message.success('模块删除成功')
        }, loadingCb)

      }
    },
    created() {
      this.tableLoading = true
      this.listModule().then(() => {
        this.tableLoading = false
      });
    },
    components: {
      ModuleTable,
      HeadTool
    }
  }
</script>
